import React, { useEffect, useState } from 'react'
import { View,Text,Image } from '@tarojs/components'
import { AtCard } from "taro-ui"
import {format} from '@/utils/Tools'
import Taro, { useDidShow, useReachBottom } from '@tarojs/taro';

import "taro-ui/dist/style/components/card.scss";
import './index.less'

export default function wholeCinemaOrder() {
  let contentText = {
    contentdown: '加载更多~',
    contentnomore: '我是有底线的~'
  }
  const [hasMore,sethasMore] = useState(true)
  const [orders, setorders] = useState([])
  const [filters,setFilters] = useState({
    pageNo: 1,
    pageSize: 10,
    total: 0
  })
  useDidShow(()=>{
    loadOrders()
  })
  useReachBottom(()=>{
    if(filters.total > orders.length){
      loadOrders({page:filters.pageNo+1},data=>{
        let recodArr = data;
        recodArr.map((v)=>{
          v.relationObject = JSON.parse(v.relationObject)
          v.couponRelationObject = JSON.parse(v.couponRelationObject)
          v.created = format(new Date(v.created),'YYYY年MM月DD日')
        })
        setorders([...orders,...recodArr])
      })
    }else{
      sethasMore(false)
    }
  })
  ///  network
  function loadOrders(e,func){
    Taro.showLoading({
      title:'加载中...'
    })
    const data = {
      pageNo:filters.pageNo,pageSize:filters.pageSize,
      ...e
    }
    Taro.$get(`/marketing/app/package/getPackageOrderList`,data,'1').then(res=>{
      if (res.code === '1') {
        setFilters({...data,total: res.content.total})
        if(func){
          func(res.content)
          return;
        }
        let recodArr = res.content.records;
        recodArr.map((v)=>{
          v.relationObject = JSON.parse(v.relationObject)
          v.couponRelationObject = JSON.parse(v.couponRelationObject)
          v.created = format(new Date(v.created),'YYYY年MM月DD日')
        })
        setorders(recodArr)
      }
    })
  }
  return (
    <View>
      <View id="page_container">
        <View class="order_list">
          {orders.map((item)=>{
            return <View className='list-item' key={item.id}>
              <View class="custom-cover" onClick={()=>{
                Taro.navigateTo({
                  url: `/mineSubPack/wholeCinema/wholeOrderDetail/index?orderId=${item.id}`
                })
              }}>
                <Image class="cover-image" mode="aspectFill" src={item.relationObject.imgUrl}>
                </Image>
                <View class="cover-content">
                  <Text class="uni-subtitle uni-black">{item.couponRelationObject.title}</Text>
                  <Text class="uni-subtitle">{item.created}</Text>
                </View>
              </View>
              <View className="item-footer">
                <Text class="uni-body"><Text style="color: #96989A; font-size: 24rpx; font-weight: 400;">实付  &nbsp;</Text><Text style="color: #26282A; font-weight: 700;;font-size: 28rpx;">￥{item.payAmount}</Text></Text>
                <Text class="pay_status uni-body" style="color: #66686A; font-size: 28rpx; font-weight: 400;" >{ item.statusString }</Text>
              </View>
            </View>
          })}
          {!hasMore && !orders.length?<View className='var-empty'><Image src={require('@/static/empty.png')} style='width:160px;height: 160px'></Image></View>:null}
          <Text class="list_bottom_line">{hasMore?contentText.contentdown:contentText.contentnomore}</Text>
        </View>
      </View>
    </View>
  )
}
